<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
	</body>
</html>
<style type="text/css">
	.box1{
		width: 500px;
		height: 500px;
		background-color: #bfa;
		position: relative;
	}
	.box2{
		width: 100px;
		height: 100px;
		background-color: #FF0000;
		position: absolute;
		/* 水平垂直居中 */
		/* 水平布局： left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含快的内容区宽度 */
		/* 发生过度约束时，则自动调整right使等式满足 margin width left right可设置为auto*/
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
		/* 垂直布局: top + margin-top + border-top + padding-top +height + + padding-bottom +border-bottom + bottom = 包含快的内容区高度*/
		top: 0;
		bottom: 0;
		margin-top: auto;
		margin-bottom: auto;
	}
</style>